<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /*
            虽然这样可以做到，也没啥毛病，但是我要告诉你的是，shift方法虽然很好用，但是你知道他背后的原理吗？
            shift其实就是把数组里的第一个元素弹出去，这个你是知道的，但是紧接着，它会把后面的元素一个一个往前推一个位置。如果数组里的项不是很多倒还好，如果多起来那是十分浪费性能的。
            此时你一定想到了用delete关键字，可是有一个小问题，delete作用于数组后，确实不会让后面的项往前推一个，但是他会在删掉的这个项的位置上放一个empty标识，如果频繁的使用delete，这个数组就变得很难看了。

            所以更合适的队列结构封装请看同目录下的 8-2.html
        */ 
        class Queue {
            #items = [];

            enQueue(data) {
                this.#items.push(data);
            }

            front() {
                return this.#items[0];
            }

            delQueue() {
                return this.#items.shift();
            }

            isEmpty() {
                return this.#items.length == 0
            }

            size() {
                return this.#items.length;
            }

            clear() {
                this.#items = [];
            }

            toString() {
                return this.#items.join('');
            }
        }


        let queue = new Queue();
    </script>
</body>

</html>